{% extends "base.html" %}

{% block title %}邮箱验证 - 个人工具网站集{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div class="text-center">
            <div class="mx-auto h-20 w-20 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                <i class="fas fa-envelope-open-text text-blue-600 text-3xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-900 mb-2">验证您的邮箱</h2>
            <p class="text-gray-600 mb-8">我们已向您的邮箱发送了验证链接</p>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
            {% if verification_status == 'success' %}
                <!-- 验证成功 -->
                <div class="text-center">
                    <div class="mx-auto h-16 w-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">验证成功！</h3>
                    <p class="text-gray-600 mb-6">您的邮箱已成功验证，现在可以正常使用所有功能。</p>
                    <div class="space-y-3">
                        <a href="{{ url_for('login') }}" 
                           class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <i class="fas fa-sign-in-alt mr-2"></i>立即登录
                        </a>
                        <a href="{{ url_for('index') }}" 
                           class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <i class="fas fa-home mr-2"></i>返回首页
                        </a>
                    </div>
                </div>
            {% elif verification_status == 'expired' %}
                <!-- 验证链接过期 -->
                <div class="text-center">
                    <div class="mx-auto h-16 w-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-clock text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">验证链接已过期</h3>
                    <p class="text-gray-600 mb-6">验证链接已过期，请重新发送验证邮件。</p>
                    <button onclick="resendVerification()" id="resendBtn"
                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                        <span id="resendText">
                            <i class="fas fa-paper-plane mr-2"></i>重新发送验证邮件
                        </span>
                        <span id="resendLoading" class="hidden">
                            <i class="fas fa-spinner fa-spin mr-2"></i>发送中...
                        </span>
                    </button>
                </div>
            {% elif verification_status == 'invalid' %}
                <!-- 无效的验证链接 -->
                <div class="text-center">
                    <div class="mx-auto h-16 w-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">验证链接无效</h3>
                    <p class="text-gray-600 mb-6">验证链接无效或已被使用，请重新注册或联系客服。</p>
                    <div class="space-y-3">
                        <a href="{{ url_for('register') }}" 
                           class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <i class="fas fa-user-plus mr-2"></i>重新注册
                        </a>
                        <a href="{{ url_for('index') }}" 
                           class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <i class="fas fa-home mr-2"></i>返回首页
                        </a>
                    </div>
                </div>
            {% else %}
                <!-- 等待验证 -->
                <div class="text-center">
                    <div class="mx-auto h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-envelope text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">检查您的邮箱</h3>
                    <p class="text-gray-600 mb-2">我们已向 <strong>{{ email or 'your-email@example.com' }}</strong> 发送了验证邮件</p>
                    <p class="text-sm text-gray-500 mb-6">请点击邮件中的链接完成验证</p>
                    
                    <!-- 验证步骤 -->
                    <div class="text-left mb-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-3">验证步骤：</h4>
                        <ol class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center">
                                <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">1</span>
                                打开您的邮箱应用或网页版邮箱
                            </li>
                            <li class="flex items-center">
                                <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">2</span>
                                查找来自我们的验证邮件
                            </li>
                            <li class="flex items-center">
                                <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">3</span>
                                点击邮件中的"验证邮箱"按钮
                            </li>
                        </ol>
                    </div>
                    
                    <!-- 提示信息 -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-lightbulb text-yellow-600"></i>
                            </div>
                            <div class="ml-3 text-left">
                                <h4 class="text-sm font-medium text-yellow-800">没有收到邮件？</h4>
                                <div class="mt-1 text-sm text-yellow-700">
                                    <ul class="list-disc list-inside space-y-1">
                                        <li>检查垃圾邮件文件夹</li>
                                        <li>确认邮箱地址是否正确</li>
                                        <li>等待几分钟后重试</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="space-y-3">
                        <button onclick="resendVerification()" id="resendBtn"
                                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <span id="resendText">
                                <i class="fas fa-paper-plane mr-2"></i>重新发送验证邮件
                            </span>
                            <span id="resendLoading" class="hidden">
                                <i class="fas fa-spinner fa-spin mr-2"></i>发送中...
                            </span>
                        </button>
                        
                        <button onclick="checkVerificationStatus()" id="checkBtn"
                                class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <span id="checkText">
                                <i class="fas fa-sync-alt mr-2"></i>检查验证状态
                            </span>
                            <span id="checkLoading" class="hidden">
                                <i class="fas fa-spinner fa-spin mr-2"></i>检查中...
                            </span>
                        </button>
                        
                        <a href="{{ url_for('index') }}" 
                           class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <i class="fas fa-home mr-2"></i>返回首页
                        </a>
                    </div>
                    
                    <!-- 倒计时 -->
                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-500" id="resendCountdown"></p>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- 帮助信息 -->
        <div class="text-center">
            <p class="text-sm text-gray-500">
                需要帮助？ 
                <a href="#" class="font-medium text-blue-600 hover:text-blue-500">联系客服</a>
                或查看 
                <a href="#" class="font-medium text-blue-600 hover:text-blue-500">常见问题</a>
            </p>
        </div>
    </div>
</div>

<script>
let resendCooldown = 0;
let countdownInterval;

// 重新发送验证邮件
function resendVerification() {
    if (resendCooldown > 0) {
        return;
    }
    
    const resendBtn = document.getElementById('resendBtn');
    const resendText = document.getElementById('resendText');
    const resendLoading = document.getElementById('resendLoading');
    
    resendBtn.disabled = true;
    resendText.classList.add('hidden');
    resendLoading.classList.remove('hidden');
    
    fetch('{{ url_for("resend_verification") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: '{{ email or "" }}'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage('验证邮件已重新发送！');
            startResendCooldown(60); // 60秒冷却时间
        } else {
            showErrorMessage(data.message || '发送失败，请重试');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('网络错误，请重试');
    })
    .finally(() => {
        resendBtn.disabled = false;
        resendText.classList.remove('hidden');
        resendLoading.classList.add('hidden');
    });
}

// 检查验证状态
function checkVerificationStatus() {
    const checkBtn = document.getElementById('checkBtn');
    const checkText = document.getElementById('checkText');
    const checkLoading = document.getElementById('checkLoading');
    
    checkBtn.disabled = true;
    checkText.classList.add('hidden');
    checkLoading.classList.remove('hidden');
    
    fetch('{{ url_for("check_verification_status") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: '{{ email or "" }}'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.verified) {
            showSuccessMessage('邮箱已验证！正在跳转...');
            setTimeout(() => {
                window.location.href = '{{ url_for("login") }}';
            }, 2000);
        } else {
            showInfoMessage('邮箱尚未验证，请检查您的邮箱');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('检查失败，请重试');
    })
    .finally(() => {
        checkBtn.disabled = false;
        checkText.classList.remove('hidden');
        checkLoading.classList.add('hidden');
    });
}

// 开始重新发送冷却时间
function startResendCooldown(seconds) {
    resendCooldown = seconds;
    const resendBtn = document.getElementById('resendBtn');
    const countdownElement = document.getElementById('resendCountdown');
    
    resendBtn.disabled = true;
    
    countdownInterval = setInterval(() => {
        if (resendCooldown > 0) {
            countdownElement.textContent = `请等待 ${resendCooldown} 秒后重新发送`;
            resendCooldown--;
        } else {
            clearInterval(countdownInterval);
            countdownElement.textContent = '';
            resendBtn.disabled = false;
        }
    }, 1000);
}

// 显示成功消息
function showSuccessMessage(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
    alertDiv.innerHTML = `<i class="fas fa-check-circle mr-2"></i>${message}`;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// 显示错误消息
function showErrorMessage(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
    alertDiv.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i>${message}`;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// 显示信息消息
function showInfoMessage(message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'fixed top-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
    alertDiv.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// 页面加载时自动检查验证状态（如果是从邮件链接跳转过来的）
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');
    
    if (token) {
        // 如果URL中有token，说明是从邮件链接跳转过来的，自动验证
        fetch('{{ url_for("verify_email_token") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                token: token
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 验证成功，刷新页面显示成功状态
                window.location.href = '{{ url_for("verify_email") }}?status=success';
            } else {
                // 验证失败，显示相应状态
                const status = data.expired ? 'expired' : 'invalid';
                window.location.href = `{{ url_for("verify_email") }}?status=${status}`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorMessage('验证失败，请重试');
        });
    }
    
    // 如果是等待验证状态，启动定期检查
    {% if not verification_status %}
    setInterval(() => {
        checkVerificationStatus();
    }, 30000); // 每30秒检查一次
    {% endif %}
});
</script>
{% endblock %}